import React from "react";
import { Button ,Table, Space, Modal, message} from 'antd';
import Req from "../../../api";
import AddKill from "../../../components/addKill/AddKill";
import ModifyKill from "../../../components/modifyKill/ModifyKill";
import { ExclamationCircleOutlined } from '@ant-design/icons';

class GoodsComm extends React.Component {
  constructor(props) {
    super(props);
    this.state={
      data: [],
      pagination: {
        current: 1,
        pageSize: 4,
      },
      loading: false,  //  加载
      visible: false,  // 模态框显示
      title: "添加秒杀", // 模态框的title
      showComponent: false,  // 添加与修改组件的显示与隐藏
      flag: false,  // 标记修改与添加
      rowData: null,  // 表格行数据
    }
  }
  const
  columns = [
    {
      title: 'ID',
      dataIndex: 'id',
    },
    {
      title: '商品名称',
      dataIndex: 'name',
    },
    {
      title: '活动日期',
      render: (row)=>{
        return (
            <div>
              <div>{row.startdate}</div>
              <div>{row.enddate}</div>
            </div>
        )
      }
    },
    {
      title: '已秒',
      dataIndex: 'count',
    },
    {
      title: '状态',
      dataIndex: 'state',
      render:(state)=>(
          state == 1 ? "尚未开始" : state == 2 ? "进行中" : state == 3 ? "已售完" : "已结束"
      )
    },
    {
      title: '操作',
      dataIndex: 'option',
      render:()=>(
          <div>
            <Button type="link" onClick={this.showModifyModal}>修改</Button>
            <Button type="link" onClick={this.killDelete.bind(this)}>删除</Button>
          </div>
      )
    }
  ];
  componentDidMount() {
    this.getData();
  }
  // 搜索商品
  shopKill = function (prams) {
    Req.killShop(prams).then(res=>{
      this.setState({
        list: res.data,
      });
    }).catch(err=>{
      console.log(err)
    })
  }
  // 删除
  killDelete=function() {
    Modal.confirm({
      title: '确认？',
      icon: <ExclamationCircleOutlined />,
      content: '确认删除该秒杀吗？',
      okText: '确认',
      cancelText: '取消',
      onOk:()=>{
        Req.killDelete({id:this.state.rowData.id}).then(res=>{
          message.success(res.msg)
        }).catch(err=>{
          console.log(err)
        })
      }
    });
  }
  // 获取列表数据
  getData = function () {
    this.setState({
      loading: true
    })
    Req.killList().then(res=>{
      console.log(res);
      console.log(res.data)
      this.setState({
        data: res.data,
        loading: false
      })
    }).catch(err=>{
      console.log(err)
    })
  }
  // 添加秒杀
  addKill = function (prams) {
    Req.killAdd(prams).then(res=>{
      message.success(res.msg)
    }).catch(err=>{
      console.log(err)
    })
  }
  // 修改秒杀
  modifyKill = function (prams) {
    Req.killModify(prams).then(res=>{
      console.log(res);
      message.success(res.msg)
    }).catch(err=>{
      console.log(err)
    })
  }
  // 改变分页
  handleTableChange = (pagination) => {
    // this.getData();
  };
  // 显示添加模态框
  showModal = () => {
    this.setState({
      visible: true,
      showComponent: true,
      title: "添加秒杀",
      flag: false
    });
  };
  // 显示修改模态框
  showModifyModal = () => {
    this.setState({
      visible: true,
      showComponent: false,
      title: "修改秒杀",
      flag: true
    });
  };
  // 模态框点击确定
  handleOk = e => {
    this.setState({
      visible: false,
    });
    this.addKill(e);
  };
  // 修改确认
  handleOk1 = e => {
    this.setState({
      visible: false,
    });
    this.modifyKill(e);
  };
  // 关闭模态框
  handleCancel = e => {
    console.log(e);
    this.setState({
      visible: false,
    });
  };
  render() {
    const { data, pagination, loading } = this.state;
    return (
        <>
          <Space style={{ marginBottom: 16 }}>
            <Button type="primary" onClick={this.showModal}>添加秒杀</Button>
          </Space>
          <Table
              columns={this.columns}
              dataSource={data}
              rowKey={(record) => `complete${record.id}`}
              pagination={pagination}
              loading={loading}
              onChange={this.handleTableChange}
              onRow={record =>{
                return {
                  onClick: event =>{
                    this.setState({
                      rowData: record
                    },() => {
                    })
                  }
                }
              }}
          />
          <Modal
              title={this.state.title}
              visible={this.state.visible}
              onCancel={this.handleCancel}
              footer={
                []
              }
              destroyOnClose
          >
            {this.state.showComponent ? <AddKill handleCancel={this.handleCancel} handleOk={this.handleOk} shopKill={this.shopKill}/>: <ModifyKill data={this.state.rowData} handleCancel={this.handleCancel} handleOk={this.handleOk1}/>}
          </Modal>
        </>
    );
  }
}
export default GoodsComm